<template>
  <a-drawer
    title="详情信息"
    placement="right"
    :visible="visible"
    :width="720"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <template>
      <table class="moreInfo">
        <tr align="center">
          <th>姓名</th><td>{{ this.staffInfo.staffName }}</td>
          <th>性别</th><td>{{ this.staffInfo.staffSex }}</td>
          <td rowspan="3">
            <a-card style="">
              <img
                slot="cover"
                alt="图像"
                :src="this.staffInfo.staffImage"
              />
            </a-card>
          </td>
        </tr>
        <tr align="center">
          <th>部门</th><td>{{ this.staffInfo.deptName }}</td>
          <th>电话</th><td>{{ this.staffInfo.staffTel }}</td>
        </tr>
        <tr align="center">
          <th>出生日期</th><td>{{ forMateDate(this.staffInfo.staffBirth) }}</td>
          <th>备注信息</th><td>{{ this.staffInfo.staffInfo }}</td>
        </tr>
      </table>
    </template>
  </a-drawer>
</template>

<script>
  export default {
    name: 'StaffInfo',
    data () {
      return {
        visible: false,
        staffInfo: {}
      }
    },
    methods: {
      forMateDate (datetime) {
        function addDateZero (num) {
          return (num < 10 ? '0' + num : num)
        }
        const d = new Date(datetime)
        const formatDatetime = d.getFullYear() + '-' + addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate())
        return formatDatetime
      },
      info (record) {
        this.visible = true
        this.staffInfo = record
      },
      onClose () {
        this.visible = false
      }
    }
  }
</script>
<style>
  input::-webkit-input-placeholder{
    text-align: center;
  }
  .moreInfo{
    width: 680px;
    border: 1px solid #999;
    border-spacing: 0;
  }

  .moreInfo tr{
    height: 50px;
  }
  .moreInfo th{
    background: rgba(250,250,250,0.84);
    font-weight: lighter;
    color: black;
    border: 1px solid #999;
    border-spacing: 0;
  }
  .moreInfo td{
    border: 1px solid #999;
    border-spacing: 0;
  }
</style>
